import BannerAnim from 'rc-banner-anim';
import TweenOne, {TweenOneGroup} from 'rc-tween-one';
import React, {Fragment} from 'react';
import 'rc-banner-anim/assets/index.css';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import css from './index.less';
import {FEED} from 'utils/feedFunc';
import Detail from 'components/page/detail';

import goSlider from 'assert/img/goSlider.png';
import bg from 'assert/img/home.jpg';
import dan1 from 'assert/img/dan1.png';
import dan2 from 'assert/img/dan2.png';
import dan3 from 'assert/img/dan3.png';
import dan4 from 'assert/img/dan4.png';

const {Element, Arrow, Thumb} = BannerAnim;
const BgElement = Element.BgElement;

export default class Home extends React.Component {

  static propTypes = {
    getClass: PropTypes.func,
  };

  static defaultProps = {
    sliderData: [
      {
        img: dan1,
        id: '561657192566',
        lei: 1,
      },
      {
        img: dan2,
        id: '569351858775',
        lei: 1,
      },
      {
        img: dan3,
        id: '567609294280',
        lei: 3,
      },
      {
        img: dan4,
        id: '38333686135',
        lei: 6,
      },
    ],
  };


  constructor(props) {
    super(props);
    this.state = {
      showDetail: false,
      detailsId: 0,
      lei: 1,
    };
    this.itemDetail = props.itemDetail.slice(0);
    // this.videoRef = React.createRef();
  }

  componentDidMount() {
    // if (this.videoRef.current.play) {
    //   this.videoRef.current.play()
    // }
  }

  componentWillUnmount() {

  }





  renderItem = (item, index) => {

    const bgImgProps = {
      className: css.bannerUseElemBg,
      src: item.img,
      onClick: (e) => {
        // e.stopPropagation();
        // console.log(111);
        this.setState({
          detailsId: item.id,
          lei: item.lei,
          showDetail: true
        });
        // this.props.switchRoute('Page');
        // this.props.getId(item.id);
        // FEED('');
      }
    };

    return (
      <Element prefixCls={css.bannerUseElem} key={`ele_img_${index}`}>
        <BgElement className={css.bannerUseElemBg} key={`img_Bg_${index}`}>
          <img key={`imgBgIn_${index}`} {...bgImgProps}/>
        </BgElement>
      </Element>
    );
  };

  renderSlider = () => {
    const {sliderData} = this.props;

    return (
      <BannerAnim
        prefixCls={css.bannerUser}
        autoPlay={true}
        key="ban1"
        // duration={100}
        delay={3000}
        type="across"
        // type="grid"
      >
        {
          sliderData.map((item, index) => {
            return this.renderItem(item, index);
          })
        }
        <Arrow arrowType="prev" key="prev"/>
        <Arrow arrowType="next" key="next"/>
        <Thumb key="thumb"/>
      </BannerAnim>
    );

  };


  render() {

    const {switchRoute, route} = this.props;
    const {detailsId, showDetail, lei} = this.state;
    let detail = this.itemDetail[lei];

    const toVideoProps = {
      className: css.btn1,
      onClick: () => {
        switchRoute('VideoList');
      },
    };
    const btn2Props = {
      className: css.btn2,
      onClick: () => {
        switchRoute('Btn2');
      },
    };
    const btn3Props = {
      className: css.btn3,
      onClick: () => {
        switchRoute('Btn3');
      },
    };
    const btnRightProps = {
      className: css.btnRight,
      onClick: () => {
        switchRoute('VideoList');
      },
    };

    const detailProps = {
      detailsId,
      itemDetail: detail.goods,
      hidden: () => {
        this.setState({
          showDetail: false,
        });
        // FEED('');
      },

    };

    const videoProps = {
      className: css.homeVideo,
      src: 'http://cloud.video.taobao.com//play/u/859672019/p/1/e/6/t/1/50184800914.mp4',
      autoPlay: true,
      controls: true,
      loop: true,
      // muted: true,
      // ref: this.videoRef,

    };

    return (
      <div>
        <img src={bg} className={css.bg}/>
        <video {...videoProps}/>
        {
          this.renderSlider()
        }
        <div {...toVideoProps}/>
        <div {...btn2Props}/>
        <div {...btn3Props}/>
        <div {...btnRightProps}/>
        <img className={css.goSlider} src={goSlider} onClick={() => route('Slider')}/>
        {
         showDetail && <Detail {...detailProps}/>
        }
      </div>

    );
  }
}
